<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="UTF-8">
    <title>统计图</title>
    <script src="/js/echarts.min.js"></script>
    <script src="/js/jquery-3.7.0.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
<input type="hidden" id="gwDate" th:value="${gwDate}" />
<input type="hidden" id="gwOI" th:value="${gwOI}" />
<input type="hidden" id="gwMeterAddr" th:value="${gwMeterAddr}" />
<div id="main" style="width:100%;height:100%;"></div>

<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    myChart.setOption({
        title: {
            text: '统计列表'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },


        },
        legend: {},
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.1],
            //不显示X轴刻度线和数字
            splitLine: {
                show: false
            },
            axisLabel: {
                show: false
            },
        },
        yAxis: {
            type: "category",
            data: ["53343306330C", "53343306240F", "50333105310D", "503331051C10", "503331052303", "50333105150C", "50333105140A", "50333105250B", "533433060B0C", "503331052901", "533433062710", "50333105280E", "50333105360A", "50333105220C"],
            //升序
            inverse: true,
            triggerEvent: true,
            splitLine: {
                show: false
            },
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            //key和图间距
            offset: 10,
            //动画部分
            animationDuration: 300,
            animationDurationUpdate: 300,
            //key文字大小
            nameTextStyle: {
                fontSize: 6,
            },
        },
        series: [{
            //柱状图自动排序，排序自动让Y轴名字跟着数据动
            realtimeSort: true,
            name: "数量",
            type: "bar",
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            barWidth: 14,
            barGap: 10,
            smooth: true,
            valueAnimation: true,
            //Y轴数字显示部分
            label: {
                normal: {
                    show: true,
                    position: "right",
                    valueAnimation: true,
                    offset: [5, -2],
                    textStyle: {
                        color: "#333",
                        fontSize: 13,
                    },
                },
            },
            itemStyle: {
                emphasis: {
                    barBorderRadius: 7,
                },
                //颜色样式部分
                normal: {
                    barBorderRadius: 7,
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                            offset: 0,
                            color: "#3977E6"
                        },
                        {
                            offset: 1,
                            color: "#37BBF8"
                        },
                    ]),
                },
            },
        }, ]
    });

    myChart.on('click', function(params) {
        if (params.componentType === 'yAxis') {
            var yValue = params.value;
            copyToClipboard(yValue);
        }
    });

    function copyToClipboard(yValue) {
        if (document.getElementById("gwOI").value != "") {
            window.open("../../../api/v1/world/" + document.getElementById("gwDate").value + '/' + yValue);
        } else {
            //var oi = "" +
            window.open("/api/v1/world/" +
                document.getElementById("gwDate").value + '/' +
                document.getElementById("gwMeterAddr").value + '/' +
                yValue.substring(yValue.length - 4));
        }
    }
</script>

<script type="text/javascript">
    function run() {

        var url

        url ='/api/v1/data/foo/' + document.getElementById("gwDate").value
        $.getJSON(url).done(function(json) {
            myChart.setOption({
                title: {
                  text: json.title
                },
                yAxis: {
                    data: json.labs
                },
                series: [{
                    name: json.name,
                    data: json.vals
                }]
            });
        });
    }
    
    setTimeout(function () {
        run();
    }, 0);
    
    setInterval(function () {
        run();
    }, 60000);
</script>

</body>
</html>